<template>
  <div class="alternate-domain">
    <template v-for="item of data.alterDomains">
      <span class="domain-label">{{ item.name }}：</span
      ><span class="domain-url">{{ item.domain }}</span>
    </template>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { getApiAlterDomains } from "@/api/api";
const data = reactive({
  alterDomains: [],
});
onMounted(() => {
  getAlterDomainsInfo()
})
const getAlterDomainsInfo = () => {
  getApiAlterDomains().then(res => {
    data.alterDomains = res
  })
}
</script>

<style lang="less" scoped>
.alternate-domain {
  background: red;
  font-size: 1.6rem;
  height: 6rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid gray;
}
@media (max-width: 750px) {
  .alternate-domain {
    font-size: 0.875rem;
  }
}
.domain-label {
  color: #fff;
  font-weight: 600;
}
.domain-url {
  font-weight: 600;
}
</style>
